<!--
 * @description: 
 * @Date: 2023-03-02 11:38:41
 * @example: 
 * @params: 
-->
<template>
  <div class="map_container">

  <div class="setup" @click="handle()" >
    <Icon type="md-settings" size="30" />
    </div>
    <div id="app" >
      <div id="aaaa" v-if="Style"></div>
      <!-- https://docs.mapbox.com/api/maps/styles/ -->
      <Drawer title="Basic Drawer" v-model="value1"   :width="428" :closable="true"  class="language-drawer">
      <div class="language-box">
      <div
        class="language-item"
        v-for="o in options"
        :key="o.value"
        :class="{ active: o.value === Style }"
        @click="changeLanguage(o.value)"
      >
        <span class="name">
          <img :src="o.img" />
          {{ o.name }}
        </span>
        <!-- <span class="label" v-text="o.label" /> -->
        <span class="radio" />
      </div>
    </div>
      </Drawer>
    </div>

  </div>
</template>

<script>
const mapboxgl = require("mapbox-gl"); //引入组件
// import MapboxLanguage from "@mapbox/mapbox-gl-language";
export default {
  name: "App",
  data(){
    return{
      value1: false,
      map:null,
      Style:"mapbox://styles/mapbox/dark-v11",
      SytleList:[
        {name:"Streets",url:"mapbox://styles/mapbox/streets-v12"},
        {name:"Outdoors",url:"mapbox://styles/mapbox/outdoors-v12"},
        {name:"Light",url:"mapbox://styles/mapbox/light-v11"},
        {name:"Dark",url:"mapbox://styles/mapbox/dark-v11"},
        {name:"Satellite",url:"mapbox://styles/mapbox/satellite-v9"},
        {name:"Satellite Streets",url:"mapbox://styles/mapbox/satellite-streets-v12"},
        {name:"Navigation Day",url:"mapbox://styles/mapbox/navigation-day-v1"},
        {name:"Navigation Night",url:"mapbox://styles/mapbox/navigation-night-v1"},

      ],
      language:"",
      options: [
        {
          value: "mapbox://styles/mapbox/streets-v12",
          name: "Streets",
          label: "Streets",
          img: require("@/assets/Mapbox Streets.png"),
        },
        {
          value: "mapbox://styles/mapbox/outdoors-v12",
          name: "Outdoors",
          label: "Outdoors",
          img: require("@/assets/Mapbox Outdoors.png"),
        },
        {
          value: "mapbox://styles/mapbox/light-v11",
          name: "Light",
          label: "Light",
          img: require("@/assets/Mapbox Light.png"),
        },
        {
          value: "mapbox://styles/mapbox/dark-v11",
          name: "Dark",
          label: "Dark",
          img: require("@/assets/Mapbox Dark.png"),
        },
        {
          value: "mapbox://styles/mapbox/satellite-v9",
          name: "Satellite",
          label: "Satellite",
          img: require("@/assets/Mapbox Satellite.png"),
        },
        {
          value: "mapbox://styles/mapbox/satellite-streets-v12",
          name: "Satellite",
          label: "Satellite",
          img: require("@/assets/Mapbox Satellite Streets.png"),
        },
        {
          value: "mapbox://styles/mapbox/navigation-day-v1",
          name: "Navigation",
          label: "Navigation",
          img: require("@/assets/Mapbox Navigation Day.png"),
        },
        {
          value: "mapbox://styles/mapbox/navigation-night-v1",
          name: "Navigation",
          label: "Navigation",
          img: require("@/assets/Mapbox Navigation Night.png"),
        },
      ],
    }
  },
  methods: {
    initMap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiemhhbmdrYWk2NjYiLCJhIjoiY2xpNDM2MHg2MWlvYTNjbXZzNWFxMG1lMSJ9.P0wAP6yFRsTooxqSxx7Qeg"; //这里请换成自己的token
      this.map = new mapboxgl.Map({
        container: "aaaa", // container id 绑定的组件的id
        style: this.Style, //地图样式，可以使用官网预定义的样式,也可以自定义
        center: [114.06980926876878, 22.53430950353102], // 初始坐标系，这个是南京建邺附近
        zoom: 11, // starting zoom 地图初始的拉伸比例
        pitch: 70, //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
        bearing: -13.6, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
        antialias: true, //抗锯齿，通过false关闭提升性能
      });
      // const geocoder = new MapboxGeocoder({
      //   accessToken: mapboxgl.accessToken,
      //   language: "Zh", // Specify the language as German.
      //   mapboxgl: mapboxgl,
      // });
      // map.addControl(geocoder);
      /** 点击获取坐标点或地址 */
      this.map.on("click", (e) => {
        console.log("hellop");
        const features = map.queryRenderedFeatures(e.point);
        if (features.length === 0) {
          return;
        }
        let address = "";
        const { lng } = e.lngLat;
        const { lat } = e.lngLat;
        console.log(lng, lat);
        if (Object.keys(features[0].properties).includes("name")) {
          address = features[0].properties.name;
        } else {
          address = `[ ${lng}, ${lat} ]`;
        }
        this.address = address;

        // console.log(features);
        console.log(address);
        console.log(e);
        /** 根据点击的坐标添加mark */
        // marker.setLngLat(e.lngLat);
        // marker.addTo(map);
      });
    },
    handle(){
      this.value1 = true
    },
    changeLanguage(name){
      this.Style  ="" 
      this.map = null;
      this.$nextTick(()=>{
        console.log(name)
        this.Style = name
        setTimeout(() => {
          this.initMap();
        }, 0);
      })
    
    }
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
::v-deep .mapboxgl-ctrl-logo {
  display: none !important;
}
::v-deep .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
   display: none !important;
}
.map_container {
  width: 100%;
  height: 100vh;
  position: relative;

  .setup {

    position: absolute;
    z-index: 99;
    // background-color: red;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }
  #map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    .mapboxgl-canvas {
      outline: none;
    }
    // 隐藏mapbox商标
    .mapboxgl-ctrl-logo {
      display: none;
    }

  }

}
#app {
  width:  100%;
  height: 100%;
 }
 </style>
<style lang="less">
.ivu-drawer-content {
  // background-color: black;
  background-color: hsla(0,0%,7%,.42) !important;
  color: #fff;
  :deep .ivu-drawer-close {
    z-index: 1;
    font-size: 12px;
    position: absolute;
    right: 8px;
    top: 8px;
    overflow: hidden;
    cursor: pointer;
}
.dark_color~.v-transfer-dom .ivu-drawer-content .ivu-drawer-header {
    border-bottom: 1px solid #212121;
}
.ivu-drawer-body {
    width: 100%;
    height: calc(100% - 51px);
    padding: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    position: absolute;
    overflow: auto;
}
}

</style>
<style lang="less" scoped>
.language-box {
  .language-item {
    width: 100%;
    padding: 0 16px;
    border-radius: 4px;
    line-height: 48px;
    display: flex;
    margin-top: 8px;
    justify-content: space-between;
    align-items: center;
    transition: all 0.1s;
    border: 1px solid transparent;
    .name {
      width: 175px;
      display: flex;
      align-items: center;
      img {
        width: 100px;
        margin-right: 100px;
      }
    }
    .label {
      flex: 1;
    }
    .radio {
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 8px;
      border: 1px solid #ffffff30;
      position: relative;
    }
    &:hover {
      background-color: #4d4d4d30;
      border-color: #4d4d4d;
      cursor: pointer;
    }
    &.active {
      background-color: #243638;
      .radio {
        border-color: #16cccc;
        padding: 4px;
        &::after {
          content: "";
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 4px;
          background-color: #16cccc;
          position: absolute;
          top: 3px;
          left: 3px;
        }
      }
    }
  }
}</style>
